<template>
    <div class="container">
        <img :src="imgPath" alt="">
        <p>{{text}}</p>
    </div>
</template>

<script>
    export default {
        name: "CultureItem",
        props:{
            imgPath:{
                type:String,
                required:true
            },
            text:{
                type:String,
                required: true
            }
        },
        setup(){
        }
    }
</script>

<style scoped lang="less">
    .container {
        cursor: pointer;
        width: 120px;
        height: 125px;
        text-align: center;
        border-radius: 10%;
        margin: 0px 20px;
        padding-top: 25px;
        box-shadow: 0px 0px 5px 2px #b9b9b9;
        overflow: hidden;
    }
     img {
        width: 64px;
        height: 64px;
        border-radius: 32px;
        transition: all 0.3s ease;
    }

     p {
        width: 100%;
        padding: 10px 0;
        color: #9e9e9e;
        transition: all 0.3s ease;
    }

    .container:hover >img {
        background-color: #d9d9d9;
    }

    .container:hover> p {
        color: black;
    }
    p:hover{
        color: red;
    }
</style>